<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <!--首先完成移动端的预览设置问题,设备的宽度初始缩放倍数为1.0倍，这里还可以设置用户禁止缩放等等-->
    <meta name="viewport" content="device-width,initial-scale=1.0">
    <title>曾中杰's world</title>
    <!--接下来进行semanticUI的css CDN的引用-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
    <!--引入我们自己写的css-->
    <link rel="stylesheet" href="../static/css/me.css" >

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <!--动画效果的插件-->
    <link rel="stylesheet" href="../static/css/animate.css">

</head>
<body>

<!--左侧边留言板-->
<div class="ui left sidebar inverted vertical menu">

    <form method="post" th:action="@{/messages}" class="ui inverted center aligned form">

        <div class="ui field">
            <div class="ui left icon input">
                <i class="user icon"></i>
                <input type="text" placeholder="别忘记留下昵称" name="nickname">
            </div>
        </div>
        <div class="ui field">
            <textarea  placeholder="留下你的声音吧。" name="content"></textarea>
        </div>
        <div class="ui  field">
            <button type="submit" id="commentpost-btn" class="ui right aligned m-margin-bottom-small m-mobile-wide  teal button"><i class="edit icon"></i>发布</button>
        </div>

    </form>


    <div th:each="message : ${messages}" class="header item m-text-spaced m-padded-tb-big ">
        <span th:text="${message.nickname}">Jay</span>:<br><br>
        <span th:text="${message.content}">They always need to have things to explained.</span>
        <br><br>
        <div th:text="${#dates.format(message.createTime,'yyyy-MM-dd HH:mm')}" class="ui right aligned">2019-04-01 19:00</div>
    </div>

</div>
<!--右侧边音乐盒-->
<div class="ui right sidebar inverted vertical menu">
    <audio id="audio" name="audio" autoplay="autoplay"   controls="controls" loop="loop"  preload="auto" src="一生中最爱.mp3" th:src="@{/music/一生中最爱.mp3}"></audio>

    <a class="music-1" href="#">
        <div class="header item m-text-spaced m-padded-tb-big ">
            <span>1.Avril Lavigne-Innocence</span>
        </div>
    </a>
    <a class="music-2" href="#">
        <div class="header item m-text-spaced m-padded-tb-big ">
            <span>2.Taylor Swift-Red</span>
        </div>
    </a>

    <a class="music-3" href="#">
        <div class="header item m-text-spaced m-padded-tb-big ">
            <span>3.ZAYN/Taylor Swift-I Don't Wanna Live Forever</span>
        </div>
    </a>
    <a class="music-4" href="#">
        <div class="header item m-text-spaced m-padded-tb-big ">
            <span>4.谭咏麟-一生中最爱</span>
        </div>
    </a>
</div>

<!--主体-->
<div class="pusher">
    <!--导航栏-->
    <nav th:replace="_fragments :: menu(1)"  class="ui   attached segment m-padded-tb-mini m-shadow-small animated fadeInDown">

        <!--container的好处很多，其中之一使得设备正常显示-->
        <div class="ui container">
            <!--使用一个菜单来放我们所有的导航链接-->
            <div class="ui  secondary stackable menu">
               <a class="item">
                   <img class="ui circular image" src="https://picsum.photos/50/50?image=1025">
                   &nbsp;&nbsp;&nbsp;Mr_曾中杰
               </a>&nbsp;
               <a class=" item m-item m-mobile-hide"><i class="fas fa-carrot"></i>首页</a>
                <a class="item m-item m-mobile-hide"><i class="fas fa-ice-cream"></i>分类</a>
                <a class="item m-item m-mobile-hide" ><i class="fas fa-candy-cane"></i>标签</a>
                <a class="item m-item m-mobile-hide"><i class="fas fa-pizza-slice"></i>归档</a>
                <a class="item m-item m-mobile-hide"><i class="fas fa-cookie"></i>本站</a>
                <a class="item m-item m-mobile-hide"><i class="fas fa-fish"></i>友链</a>
                <a class="item m-item m-mobile-hide"><i class="fas fa-seedling"></i>关于我</a>
                <div class="right m-item item m-mobile-hide">
                    <div class="ui icon inverted  input">
                        <input type="text" placeholder="Search...">
                        <i class="search link icon"></i>
                    </div>
                </div>
            </div>
        </div>

        <!--这里来弄一个导航隐藏按钮-->
        <a href="#" class="ui black icon button m-right-top m-mobile-show menu toggle">
            <i class="sidebar icon"></i>
        </a>

    </nav>
    <!--中部主体-->
    <div class=" m-padded-tb-large" >

        <div class="ui stackable this   container m-container-nine" >

            <!--广播和留言板-->
            <div class="ui stackable middle aligned grid animated lightSpeedIn ">

                <div class=" left aligned thirteen wide column   m-mobile-hide">
                    <div class="ui basic raised segment m-padded-tb-small centerMessage " >
                        <div class="ui teal header ">
                            <div class="ui text shape m-inline-block">
                                <div class="sides ">
                                    <div class="ui  side active m-text-spaced ">
                                        <span>They always need to have things to explained.</span>——————by&nbsp;&nbsp;<span> The Little Prince</span>
                                    </div>
                                    <div th:each="message : ${messages}"   class="ui  side  ">
                                        <div class="m-text-spaced">
                                            <span th:text="${#strings.abbreviate(message.content,30)}">They always need to have things to explained.</span>
                                            ——————by&nbsp;&nbsp;&nbsp;&nbsp;<span th:text="${message.nickname}">The Little Prince</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="two wide center aligned column m-padded-tb-this">
                    <button id="sidebar-btn" class="ui mini  teal button" >留言板</button>
                    <button id="music-btn" class="ui mini orange button">音乐盒</button>
                </div>

            </div>

            <div class="ui stackable  grid m-padded-tb-small">

                <!--左边的明信片和小便签-->
                <div class="ui  three wide   column m-column">

                    <!--个人明信片-->

                   <div class="ui   link  card m-card-center">
                        <div class="image">
                            <img src="../static/images/elyse.png" th:src="@{/images/myPicture.jpg}">
                        </div>
                        <div class="content">
                            <a class="header" href="#aboutme">曾中杰</a>
                            <div class="meta">
                                <a style="">Java程序员、生活梦想家</a>
                            </div>
                            <div class=" description m-padded" style="font-family: 楷体;font-weight: 800 ;!important;">
                                唯有你也想见我，<br>
                                我们的见面才有意义。
                            </div>
                        </div>
                        <div class=" extra content">
                            <a href="https://github.com/Mretron" target="_blank" class="ui circular icon button"><i class="github icon"></i></a>
                            <a href="https://blog.csdn.net/weixin_42036647" target="_blank" class="ui circular icon button"><i class="fab fa-cuttlefish"></i></a>
                            <a href="https://weibo.com/u/3736077822" class="ui circular icon button"><i class="weibo icon"></i></a>
                            <a href="#"  class="ui qq circular icon button" data-content="1474159935" data-position="bottom center"><i class="qq icon"></i></a>
                        </div>

                    </div>


                    <!--这里是一根分割线-->
                    <div class="m-text-a ui horizontal divider m-margin  ">小世界</div>
                    <!--下面是一些链接-->
                    <div class="ui cards ">
                        <a class="orange  card m-card-center" href="#">
                            <div class="content" style="background:url(/images/just-waves.png)">
                                <div class="header">我的人生</div>
                                <div class="description">
                                    <p>记录我的人生轨迹ing...</p>
                                </div>
                            </div>
                            <div class="extra content">
                                <div class="right floated author">
                                    <img class="ui avatar image" src="../static/images/elyse.png" th:src="@{/images/elyse.png}"> Jude
                                </div>
                            </div>
                        </a>
                        <a class="teal  card m-card-center" href="#">
                            <div class="content" style="background:url(/images/rip_jobs.png)">

                                <div class="header">看过的书</div>
                                <div class="description">
                                    <p>书，于我，挚友。</p>
                                </div>
                            </div>
                            <div class="extra content">
                                <div class="right floated author">
                                    <img class="ui avatar image" src="../static/images/elyse.png" th:src="@{/images/elyse.png}"> Jude
                                </div>
                            </div>
                        </a>
                        <a class="black card m-card-center" href="#">
                            <div class="content" style="background:url(/images/upfeathers.png)">
                                <div class="header">正能量</div>

                                <div class="description">
                                    <p>人生的快乐，自我的解放.</p>
                                </div>
                            </div>
                            <div class="extra content">
                                <div class="right floated author">
                                    <img class="ui avatar image" src="../static/images/elyse.png" th:src="@{/images/elyse.png}"> Jude
                                </div>
                            </div>
                        </a>
                        <a class="red card m-card-center" href="#">
                            <div class="content" style="background:url(/images/wavy-dots.png)">
                                <div class="header" >负能量</div>
                                <div class="description">
                                    <p>人活着怎么这么多失望...</p>
                                </div>
                            </div>
                            <div class="extra content">
                                <div class="right floated author">
                                    <img class="ui avatar image" src="../static/images/elyse.png" th:src="@{/images/elyse.png}"> Jude
                                </div>
                            </div>
                        </a>
                    </div>
                    <br><br>
                    <div class="ui  section divider"></div>

                    <!--最新评论-->
                    <div id="comment-container" class="ui stackable raised segments ">
                        <div th:fragment="commentList">
                            <div class="ui segment">
                            <div class="ui two column grid">
                                <div class="column">
                                    <i class="fas fa-cat"></i>  最新评论
                                </div>
                                <div class="right aligned column">
                                    <a href="#" >->想唠两句？</a>
                                </div>
                            </div>
                        </div>
                            <div th:each="comment : ${commentsPage.content}" class="ui vertical stackable segment ">
                                <div class="ui stackable grid m-padded-big">
                                    <div class="ui row m-padded-tb-mini">
                                            <a href="#" th:text="${comment.blog.title}" th:href="@{/blog/{id}(id=${comment.blog.id})}" >
                                                2019春招-字节跳动面试</a>
                                    </div>
                                    <div class="ui row m-padded-tb-mini-two " style="color: gray!important;">
                                        <div class="ui grey color"><span th:text="${comment.nickname}">大人</span>：<span th:text="${#strings.abbreviate(comment.content,12)}">为什么要对一只帽子感到</span></div>
                                    </div>
                                </div>
                            </div>
                            <div class="ui attached segment" th:if="${commentsPage.totalPages}>1">
                                <div class="ui two column grid">
                                    <div class=" column">
                                        <button id="comment-last"  th:unless="${commentsPage.first}" onclick="commentsPageUp()"   class="ui grey basic button">上一页</button>
                                    </div>
                                    <div class="ui right aligned column">
                                        <button id="comment-next" th:unless="${commentsPage.last}" onclick="commentsPageDown()"  class="ui grey basic button">下一页</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="ui  section divider"></div>
                    <div class="ui left aligned header">
                        待添加...
                    </div>
                </div>

                <!--中间的每周目标和文章-->
                <div class="ui ten wide column m-padded-lr-small">
                    <!--本周目标和上周成果-->
                    <div class="ui stackable two column grid">
                            <div class="column" >
                                <div class="ui raised segment">
                                    <a class="ui red ribbon label">上周</a>
                                    <span>收获</span>

                                    <div class="ui middle aligned animated list">
                                        <div th:each="bulletin : ${bulletins}" class="item">
                                            <img class="ui avatar image" src="../static/images/headpicture.jpg" th:src="@{/images/thelittleprince.jpg}">
                                            <div class="content">
                                                <div th:text="${bulletin.harvest}" class="header">完成蓝桥杯比赛</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="column">
                                <div class="ui raised segment">
                                    <a class="ui orange  ribbon label">本周</a>
                                    <span>待完成</span>
                                    <div class="ui middle aligned animated list">
                                        <div th:each="bulletin : ${bulletins}" class="item">
                                            <img class="ui avatar image" src="../static/images/headpicture.jpg" th:src="@{/images/flower.jpg}">
                                            <div class="content">
                                                <div th:text="${bulletin.uncompleted}" class="header">博客系统的二级评论</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>



                    <!--这里是一根分割线-->
                    <div class="ui horizontal divider m-margin " style="font-family:楷体;font-size: 20px; font-weight: 600;!important;">最新博客</div>



                    <!--文章列表-->
                    <div class="ui raised segment m-margin-small" th:each="blog : ${page.content}" th:unless="${blog.published}==false">
                        <div class="ui stackable mobile reversed grid">
                            <!--11份来显示内容-->
                            <div class="ui eleven wide column">

                                <h3 class="ui  header m-padded-tb-up"  ><a th:text="${blog.title}" th:href="@{/blog/{id}(id=${blog.id})}" href="#" target="_blank" style="font-family:宋体;color: black !important;">属于我的小王子</a></h3>
                                <a href="#" target="_blank" th:href="@{/blog/{id}(id=${blog.id})}" class="ui header">
                                <p th:text="${blog.description}" class="  " style="font-size: 15px; font-weight: 500 !important;letter-spacing: 1px !important;line-height: 2.5;" >
                                    有多少人能够反复读一本书呢？年少之秋和为人父的年龄去读小王子，其中的体会也许各有千秋吧。那在我十九岁的时空中，我的朋友小王子又教给了我什么？那在我十九岁的时空中，我的朋友小王子又教给了我什么？那在我十九岁的时空中，我的朋友小王子又教给了我什么？
                                </p><font style="font-size: 14px;!important;"><u><i>点击详情>></i></u></font></a>
                                <div class="ui divider "></div>
                                <div class="ui middle aligned grid">
                                    <div class="six wide column">
                                        <div class="ui mini horizontal link list">
                                            <div class="item">
                                                <img th:src="${blog.user.avatar}" src="https://unsplash.it/100/100?image=1005"  class="ui avatar image">
                                                <div class="content"><h5 th:text="${blog.user.nickname}" class="ui header m-opacity-mini" >曾中杰</h5> </div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar icon"></i><span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}" >2017-10-01</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="left aligned seven wide column">

                                        <a th:href="@{/tags/{id}(id=${tag.id})}" th:each="tag : ${blog.tags}" href="#"   class=" m-margin-smalls">
                                            <i class="fas fa-tag"></i>
                                            <span th:text="${tag.name}">方法论</span>
                                        </a>
                                    </div>

                                    <div class="right aligned three wide column">
                                        <a href="#" th:href="@{/types/{id}(id=${blog.type.id})}"  th:text="${blog.type.name}" target="_blank" class="ui  red basic label m-text-thin ">看过的书</a>
                                    </div>
                                </div>
                            </div>
                            <!--5份来显示图片-->
                            <div class="five wide column">

                                <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" >
                                    <img th:src="@{${blog.firstPicture}}" src="https://unsplash.it/800/450?image=1005" alt="" class="ui  rounded image">
                                </a>
                            </div>
                        </div>
                    </div>






                    <br>
                    <br>
                    <br>
                    <!--footer尾部上一页，下一页-->
                    <div class="ui segment" th:if="${page.totalPages}>1">
                        <div class="ui two column grid">
                            <div class=" column">
                                <a href="#" th:href="@{/(page=${page.number}-1)}" th:unless="${page.first}" class="ui teal basic button">上一页</a>
                            </div>
                            <div class="ui right aligned column">
                                <a href="#" th:href="@{/(page=${page.number}+1)}" th:unless="${page.last}" class="ui teal basic button">下一页</a>
                            </div>
                        </div>
                    </div>
                </div>



                <!--右边的分类标签-->
                <div class="ui three wide column">

                    <!--致访客的公告-->
                    <!--这里是一根分割线-->
                    <div class="m-text-a ui horizontal divider ">my Voice</div>

                        <div style="font-size:18px;font-weight:500;font-family: 楷体!important;">
                            <p class="ui left aligned ">长到这么大，</p>
                            <p class="content ">我说不出來我最爱的一部电影，</p>
                            <p class="">说不出來我最爱的一首歌，</p>
                            <p class="">说不出来我最爱的一个人。</p>
                            <p class="">时常觉得人生其实没那么有趣，偶尔也会质疑活着的意义，</p>
                            <p class="">所有来自于书上和别人口中的意义都不曾说服过我。</p>
                            <p class="">但今天突然觉得，大概人生最大的意义就是用余生去找到那些最爱吧。</p>
                            <P class="right aligned">by 德卡先生的信箱</P>
                            <i class="fas fa-camera-retro"></i>
                            <i class="fas fa-bacon"></i><i class="fas fa-bacon"></i><i class="fas fa-bacon"></i><i class="fas fa-bacon"></i><i class="fas fa-bacon"></i><i class="fas fa-bacon"></i><i class="fas fa-bacon"></i>
                        </div>

                    <!--这里是一根分割线-->
                    <div class="m-text-a ui horizontal divider m-margin  ">小工具</div>
                    <!--分类-->
                    <div class="ui raised segments m-margin">
                        <div class="ui segment">
                            <div class="ui two column grid">
                                <div class="column">
                                    <i class="fas fa-cat"></i>分类
                                </div>
                                <div class="right aligned column">
                                    <a href="#" th:href="@{/types/-1}" target="_blank">more</a>
                                </div>
                            </div>
                        </div>
                        <div class="ui orange segment">
                            <div class="ui fluid vertical menu" >
                                <a th:each="type : ${types}" th:href="@{/types/{id}(id=${type.id})}" class="item" href="#" target="_blank">
                                    <span th:text="${type.name}">学习日志</span>
                                    <div th:text="${#arrays.length(type.blogs)}" class="ui orange basic left pointing label">13</div>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!--标签-->
                    <div class="ui raised segments m-margin">
                        <div class="ui  segment">
                            <div class="ui two column grid">
                                <div class="column">
                                    <i class="fas fa-dove"></i>标签
                                </div>
                                <div class="right aligned column">
                                    <a href="#" th:href="@{/tags/-1}" target="_blank">more</a>
                                </div>
                            </div>
                        </div>
                        <div class="ui teal segment">
                             <a th:each="tag : ${tags}" th:href="@{/tags/{id}(id=${tag.id})}" href="#" target="_blank" class="ui teal basic left pointing label m-margin-tiny">
                                    <span th:text="${tag.name}">方法论</span>
                                    <div th:text="${#arrays.length(tag.blogs)}" class="detail">23</div>
                             </a>
                        </div>
                    </div>

                    <!--网站信息-->
                    <div class="ui raised segments m-margin">
                        <div class="ui segment">
                            <div class="ui two column grid">
                                <div class="column">
                                    <i class="info icon"></i>本站信息
                                </div>
                            </div>
                        </div>
                        <div class="ui red segment">
                            <div class="menu">
                                <div class="item m-padded-tb"><i class="sticky note outline icon"></i>文章总数:<span th:text="${page.totalElements}">56</span>篇</div>
                                <div class="item m-padded-tb"><i class="tasks icon"></i>分类总数:<span th:text="${typesCount}">56</span>个</div>
                                <div class="item m-padded-tb"><i class="tags icon"></i>标签:<span th:text="${tagsCount}">56</span>个</div>
                                <div class="item m-padded-tb"><i class="comments outline icon"></i>评论总数:<span th:text="${commentsCount}">56</span>条</div>
                                <div class="item m-padded-tb"><i class="paper plane icon"></i>建站时长:<span id="recordTime"></span></div>
                                <div class="item m-padded-tb"><i class="chart bar outline icon"></i>本站总访问量:<span th:text="${views}"></span></div>
                                <div class="item m-padded-tb"><i class="address card icon"></i>本站总访问人数:<span th:text="${visitorsCount}"></span></div>
                                <div class="item m-padded-tb"><i class="address card outline icon"></i>您是第<span th:text="${numOfYou}"></span>位访客</div>
                            </div>
                        </div>
                    </div>

                    <!--扫码关注我-->
                    <h4 class="ui horizontal divider">公众号</h4>
                    <div class="ui centered card" style="width: 110px">
                        <img src="../static/images/gongzhonghao.png" alt="" class="ui rounded image" th:src="@{/images/gongzhonghao.png}" >
                    </div>
                </div>

            </div>

        </div>
    </div>
    <br><br><br>

    <!--底部footer栏-->
    <footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">

            <!--这里的结构其实跟nav尽量保持一致-->
            <div class="ui center aligned container m-padded-tb-mini">

                <div class="ui stackable inverted divided grid">

                    <div class="three wide column">
                        <div class="ui inverted link list">
                            <div class="item">
                                <img src="../static/images/qrcode.jpg" class="ui rounded image" style="width: 110px">
                            </div>
                        </div>
                    </div>
                    <div class="three wide column">

                        <h4 class="ui inverted header m-text-spaced m-opacity-small">最新博客</h4>

                        <div class="ui inverted link list ">
                            <a href="#" class="item">用户故事(User Story)</a>
                            <a href="#" class="item">用户故事(User Story)</a>
                            <a href="#" class="item">用户故事(User Story)</a>
                        </div>
                    </div>

                    <div class="three wide column">
                        <h4 class="ui inverted header  m-text-spaced m-opacity-small">联系我</h4>
                        <div class="ui inverted link list m-text-lined">
                            <a href="#" class="item">QQ:1474159935</a>
                            <a href="#" class="item">Wechat:zeng1474159935</a>
                            <a href="#" class="item">Email:1474159935@qq.com</a>
                        </div>
                    </div>

                    <div class="seven wide column">
                        <h4 class="ui inverted header  m-text-spaced m-opacity-small">关于我</h4>
                        <p class="m-text-thin m-text-spaced m-opacity-mini">不知你是否跟我一样，喜欢了解他人如何快乐的生活，积极向他们寻求生活的乐趣。
                           一起勇敢前行吧。</p>
                    </div>
                </div>
                <!--这里是一根线-->
                <div class="ui inverted section divider"> </div>
                <p class="m-text-thin m-text-spaced m-opacity-mini">Copyright©2019-2020zzj Designed by zzj</p>
            </div>


    </footer>
</div>


<th:block th:replace="_fragments :: script">
<!--也许用到的jQuery的引用-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<!--这里进行semanticUI的js 的CDN的引用 -->
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
</th:block>


<script>
    var audio = document.getElementsByTagName('audio')[0];

    $('.music-1').click(function () {
        audio.src="/music/Innocence.mp3";
        audio.play();
    });
    $('.music-2').click(function () {
        audio.src="/music/Red.mp3";
        audio.play();
    });
    $('.music-3').click(function () {
        audio.src="/music/I Don't Wanna Live Forever.mp3";
        audio.play();
    });
    $('.music-4').click(function () {
        audio.src="/music/一生中最爱.mp3";
        audio.play();
    });


    $('.menu.toggle').click(function () {

        $('.m-item').toggleClass('m-mobile-hide');
    });

    function shapeChange(){
        $('.shape').shape('flip down');
    }

    $('#sidebar-btn').click(function () {
        $('.ui.left.sidebar')
            .sidebar('toggle')
        ;

    });

    $('#music-btn').click(function () {
        $('.ui.right.sidebar')
            .sidebar('toggle')
        ;
    });


    function guolv(a) {
        if(a<10)
            return '0'+a;
        return a;
    }

    function time(){
        var nowTime =new Date();
        var startTime=new Date(2019,3,2,17,52,0);
        var xc=(nowTime.getTime()-startTime.getTime())/1000;
        var day=parseInt(xc/86400);
        xc-=day*86400;
        var hour=parseInt(xc/3600);
        xc-=hour*3600;
        var min=parseInt(xc/60);
        var sec=parseInt(xc-min*60);
        hour=guolv(hour);
        min=guolv(min);
        sec=guolv(sec);
        var str=day+'天'+hour+'小时'+min+'分'+sec;
        $("#recordTime").html(str);
    }
    setInterval(time,1000);
    setInterval(shapeChange,4000);




    $('.ui.form').form({
        fields : {
            nickname: {
                identifier: 'nickname',
                rules: [{
                    type: 'empty'

                }]
            },
            content : {
                identifier: 'content',
                rules: [{
                    type : 'empty'
                }]
            }
        }
    });

    $('.qq').popup();

    $(function () {
        //判断是否宽屏
        var winWide = window.screen.width;

        var wideScreen = false;
        if (winWide <= 768) {//1024及以下分辨率
            $('.this').toggleClass('m-container-nine');

        }
    })

    var commentsPages = 0;
    function commentsPageUp(){
        var Lastpage = commentsPages-1;
        commentsPages--;
        $("#comment-container").load("/comments/commentsPage/?page="+Lastpage);
    }

    function commentsPageDown(){
        var Nextpage = commentsPages+1;
        commentsPages++;
        $("#comment-container").load("/comments/commentsPage/?page="+Nextpage);
    }




</script>
</body>
</html>